<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script
	src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
	<script
		src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
		
</head>
<body>
	<p align="left" style="font-size: 20px">填写标题描述</p>



	<p align="center" style="font-size: 20px">提交关键字流程:
		填写标题描述→设置价格→确认和提交→成功</p>
	<p style="font-size: 20px">
		&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
		&nbsp; &nbsp; &nbsp; &nbsp;
		&nbsp;您一次最多可以提交20个关键字,若您希望继续添加请分次提交（您已经提交了1个关键字) &nbsp; &nbsp;<a
			href="#">点击查看竞价排名关键字审核标准</a>
	</p>
	<form action="jingjia" method="post">
		<table align="center">
			<tr>
				<th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
					&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input
					type="submit" id="butt" name="butt" value="下一步">
				</th>
			</tr>
			<tr>
				<td>

					
						关键字: <input type="text" style="width: 500px" name="keyword"
						id="keyword"><select name="grade" id="grade">
						</select>最多写32个字</td>
						
					
				
			</tr>
			<tr>
				<td>网页标题: <input type="text" id="wybt" name="wybt"
					value="厚薄文化"> 最多20个字
				</td>
			</tr>
			<tr>
				<td>url地址: http :// <input type="text" id="urld"
					name="urld" value="www.baidu.com" onclick="alert(yaz(document.getElementById('urld').value));">
					<font class="fot"></font>
				</td>
			</tr>
			<tr>
				<td>网页描述 : <textarea style="width: 400px; height: 80px;"
					type="text" id="ms" name="ms"
					value="厚薄文化厚薄文化厚薄文化厚<br>薄文化厚薄文化厚薄文化厚薄文化"> 最多一百个字</textarea>
				</td>
			</tr>
		</table>
	</form>
	<form action="jingjia" method="post">
		<table align="center"class="table table-striped table-bordered table-hover">
			<tr align="left">
				<th><input type="button" id="butt" name="butt" value="复制" onclick="fuzhi()">
					点击按钮,可以将上个文本框的 内容不知道 下个 添加框内</th>
			</tr>
			<tr>
				<td>

					
						关键字: <input type="text" style="width: 500px" name="keyword1"
						id="keyword1"><select name="grade1" id="grade1">
						</select>最多写32个字</td>
				
			</tr>
			<tr>
				<td>网页标题: <input type="text" id="wybt1" name="wybt1"
					value="厚薄文化"> 最多20个字
				</td>
			</tr>
			<tr>
				<td>url地址: http :// <input type="text" id="urld1"
					name="urld1" value="www.baidu.com" onclick="alert(yaz1(document.getElementById('urld').value));">
				</td>
			</tr>
			<tr>
				<td>网页描述 : <textarea style="width: 400px; height: 80px;"
					type="text" id="ms1" name="ms1"
					value="厚薄文化厚薄文化厚薄文化厚<br>薄文化厚薄文化厚薄文化厚薄文化"> 最多一百个字</textarea>
				</td>
			</tr>
		</table>
	</form>
	<form action="jingjia" method="post">
		<table align="center">
			<tr align="left">
				<th><input type="button" id="butt" name="butt" value="复制" onclick="fuzhi()">
					点击按钮,可以将上个文本框的 内容不知道 下个 添加框内</th>
			</tr>
			<tr>
				
<td>

					
						关键字: <input type="text" style="width: 500px" name="keyword2"
						id="keyword2"><select name="grade2" id="grade2">
						</select>最多写32个字</td>
				
			</tr>
			<tr>
				<td>网页标题: <input type="text" id="wybt2" name="wybt2"
					value="厚薄文化"> 最多20个字
				</td>
			</tr>
			<tr>
				<td>url地址: http :// <input type="text" id="urld2"
					name="urld2" value="www.baidu.com" onclick="alert(yaz2(document.getElementById('urld').value));">
				</td>
			</tr>
			<tr>
				<td>网页描述 : <textarea style="width: 400px; height: 80px;"
					type="text" id="ms2" name="ms2"
					value="厚薄文化厚薄文化厚薄文化厚<br>薄文化厚薄文化厚薄文化厚薄文化"> 最多一百个字</textarea>
				</td>
			</tr>
		</table>
	</form>
	<script type="text/javascript">

	yaz=function(sz){
		alert(sz);
		//test@hotmail.com
		var szReg= /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$/; 
		var bChk=szReg.test(sz); 
		return bChk; 
		
	}
	yaz1=function(sz1){
	
		//test@hotmail.com
		var szReg= /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$/; 
		var bChk=szReg.test(sz1); 
		return bChk; 
		
	}
	yaz2=function(sz2){
		
		//test@hotmail.com
		var szReg= /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$/; 
		var bChk=szReg.test(sz2); 
		return bChk; 
		
	}
	 function fuzhi(){
		 var gjz=$("#gjz").val();
			var wybt=$("#wybt").val();
			var urld=$("#urld").val();
			var ms=$("#ms").val();
			alert(gjz);
			// 插入
			var gjz1=$("#gjz1").val(gjz);
			var wybt1=$("#wybt1").val(wybt);
			var urld1=$("#urld1").val(urld);
			var ms1=$("#ms1").val(ms);
				//第三个表格获取第二个
				var gjz2=$("#gjz2").val(gjz);
				var wybt2=$("#wybt2").val(wybt);
				var urld2=$("#urld2").val(urld);
				var ms2=$("#ms2").val(ms);
	 }
	
	 $('#keyword').change(
				function() {
					var keyword = $('#keyword').val();
					var grade = $('#grade');
					var grade1 = $('#grade1');
					var grade2 = $('#grade2');
					$.MsgBox.Confirm("温馨提示", "确定要添加到下拉框中吗？", test);
					function test() {
						grade.append("<option value="+keyword+">" + keyword
								+ "</option>");
						grade1.append("<option value="+keyword+">" + keyword
								+ "</option>");
						grade2.append("<option value="+keyword+">" + keyword
								+ "</option>");
					}
				});
		(function() {
			$.MsgBox = {
				Alert : function(title, msg) {
					GenerateHtml("alert", title, msg);
					btnOk(); //alert只是弹出消息，因此没必要用到回调函数callback
					btnNo();
				},
				Confirm : function(title, msg, callback) {
					GenerateHtml("confirm", title, msg);
					btnOk(callback);
					btnNo();
				}
			}
			//生成Html
			var GenerateHtml = function(type, title, msg) {
				var _html = "";
				_html += '<div id="mb_box"></div><div id="mb_con"><span id="mb_tit">'
						+ title + '</span>';
				_html += '<a id="mb_ico">x</a><div id="mb_msg">' + msg
						+ '</div><div id="mb_btnbox">';
				if (type == "alert") {
					_html += '<input id="mb_btn_ok" type="button" value="确定" />';
				}
				if (type == "confirm") {
					_html += '<input id="mb_btn_ok" type="button" value="确定" />';
					_html += '<input id="mb_btn_no" type="button" value="取消" />';
				}
				_html += '</div></div>';
				//必须先将_html添加到body，再设置Css样式
				$("body").append(_html);
				//生成Css
				GenerateCss();
			}

			//生成Css
			var GenerateCss = function() {
				$("#mb_box").css({
					width : '100%',
					height : '100%',
					zIndex : '99999',
					position : 'fixed',
					filter : 'Alpha(opacity=60)',
					backgroundColor : 'black',
					top : '0',
					left : '0',
					opacity : '0.6'
				});
				$("#mb_con").css({
					zIndex : '999999',
					width : '400px',
					position : 'fixed',
					backgroundColor : 'White',
					borderRadius : '15px'
				});
				$("#mb_tit").css({
					display : 'block',
					fontSize : '14px',
					color : '#444',
					padding : '10px 15px',
					backgroundColor : '#DDD',
					borderRadius : '15px 15px 0 0',
					borderBottom : '3px solid #009BFE',
					fontWeight : 'bold'
				});
				$("#mb_msg").css({
					padding : '20px',
					lineHeight : '20px',
					borderBottom : '1px dashed #DDD',
					fontSize : '13px'
				});
				$("#mb_ico").css({
					display : 'block',
					position : 'absolute',
					right : '10px',
					top : '9px',
					border : '1px solid Gray',
					width : '18px',
					height : '18px',
					textAlign : 'center',
					lineHeight : '16px',
					cursor : 'pointer',
					borderRadius : '12px',
					fontFamily : '微软雅黑'
				});
				$("#mb_btnbox").css({
					margin : '15px 0 10px 0',
					textAlign : 'center'
				});
				$("#mb_btn_ok,#mb_btn_no").css({
					width : '85px',
					height : '30px',
					color : 'white',
					border : 'none'
				});
				$("#mb_btn_ok").css({
					backgroundColor : '#168bbb'
				});
				$("#mb_btn_no").css({
					backgroundColor : 'gray',
					marginLeft : '20px'
				});
				//右上角关闭按钮hover样式
				$("#mb_ico").hover(function() {
					$(this).css({
						backgroundColor : 'Red',
						color : 'White'
					});
				}, function() {
					$(this).css({
						backgroundColor : '#DDD',
						color : 'black'
					});
				});
				var _widht = document.documentElement.clientWidth; //屏幕宽
				var _height = document.documentElement.clientHeight; //屏幕高
				var boxWidth = $("#mb_con").width();
				var boxHeight = $("#mb_con").height();
				//让提示框居中
				$("#mb_con").css({
					top : (_height - boxHeight) / 2 + "px",
					left : (_widht - boxWidth) / 2 + "px"
				});
			}
			//确定按钮事件
			var btnOk = function(callback) {
				$("#mb_btn_ok").click(function() {
					$("#mb_box,#mb_con").remove();
					if (typeof (callback) == 'function') {
						callback();
					}
				});
			}
			//取消按钮事件
			var btnNo = function() {
				$("#mb_btn_no,#mb_ico").click(function() {
					$("#mb_box,#mb_con").remove();
				});
			}
		})();
	</script>
	
</body>
</html>